<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{mall/header::head-fragment('NewBee商城-首页','index')}">
</head>
<body>
<header th:replace="~{mall/header::header-fragment}"></header>
<slot id="content">
    <nav th:replace="~{mall/header::nav-fragment}"></nav>
    <div id="banner">
        <div class="all-sort-list">
            <th:block th:each="category : ${categories}">
                <div class="item">
                    <a href="##">
                        <th:block th:text="${category.categoryName}"></th:block>
                        <i class="iconfont icon-right"></i>
                    </a>
                    <div class="item-list clearfix">
                        <div class="subitem">
                            <th:block th:each="secondLevelCategory : ${category.subCategoryVOS}">
                                <dl class="fore1">
                                    <dt><a href="#">
                                        <th:block th:text="${secondLevelCategory.categoryName}"></th:block>
                                    </a></dt>
                                    <dd>
                                        <th:block th:each="thirdLevelCategory : ${secondLevelCategory.subCategoryVOS}">
                                            <em><a href="#"
                                                   th:href="@{'/search?goodsCategoryId='+${thirdLevelCategory.categoryId}}">
                                                <th:block th:text="${thirdLevelCategory.categoryName}"></th:block>
                                            </a></em>
                                        </th:block>
                                    </dd>
                                </dl>
                            </th:block>
                        </div>
                    </div>
                </div>
            </th:block>
        </div>
        <div class="swiper-container fl">
            <div class="swiper-wrapper">
                <!-- 配置了轮播图则显示后台配置的轮播图 -->
                <th:block th:unless="${#lists.isEmpty(carousels)}">
                    <th:block th:each="carousel : ${carousels}">
                        <div class="swiper-slide">
                            <a th:href="@{${carousel.redirectUrl}}" target="_blank">
                                <img th:src="@{${carousel.carouselUrl}}" alt="">
                            </a>
                        </div>
                    </th:block>
                </th:block>
                <!-- 未配置轮播图则显示默认的三张轮播图 -->
                <th:block th:if="${#lists.isEmpty(carousels)}">
                    <div class="swiper-slide">
                        <img src="./mall/image/swiper/banner01.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="./mall/image/swiper/banner02.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="./mall/image/swiper/banner03.jpg" alt="">
                    </div>
                </th:block>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>

    <div id="sub_banner">
        <!-- 已配置热销商品则显示配置内容 -->
        <th:block th:unless="${#lists.isEmpty(hotGoodses)}">
            <th:block th:each="hotGoodse : ${hotGoodses}">
                <div class="hot-image">
                    <a th:href="@{'/goods/detail/'+${hotGoodse.goodsId}}" target="_blank">
                        <img th:src="@{${hotGoodse.goodsCoverImg}}" th:alt="${hotGoodse.goodsName}">
                        <p class="name text-truncate" th:title="${hotGoodse.goodsName}"
                           th:text="${hotGoodse.goodsName}">NewBeeMall</p>
                        <p class="grid-tips">
                            <em class="thumb"><span class="color01" style="background-color:#FF6A6E">热卖商品</span></em>
                        </p>
                    </a>
                </div>
            </th:block>
        </th:block>
    </div>

    <div class="home-banner-box">
        <a href="javascript:;">
            <img alt="test" width="1226" height="120"
                 th:src="@{/mall/image/home-banner.jpg}" lazy="loaded"
                 style="margin-top: 20px;">
        </a>
    </div>

    <div id="flash">
        <h2>新品上线</h2>
        <ul>
            <!-- 已配置新品则显示配置内容 -->
            <th:block th:unless="${#lists.isEmpty(newGoodses)}">
                <th:block th:each="newGoods : ${newGoodses}">
                    <li>
                        <a th:href="@{'/goods/detail/'+${newGoods.goodsId}}" target="_blank">
                            <img th:src="@{${newGoods.goodsCoverImg}}" th:alt="${newGoods.goodsName}">
                            <p class="name text-truncate" th:title="${newGoods.goodsName}" th:text="${newGoods.goodsName}">NewBeeMall</p>
                            <p class="discount text-truncate" th:title="${newGoods.goodsIntro}" th:text="${newGoods.goodsIntro}">NewBeeMall</p>
                            <p class="item_price" th:text="${'¥ ' + newGoods.sellingPrice}">NewBeeMall</p>
                            <p class="grid-tips">
                                <em class="thumb"><span class="color01" style="background-color:#68BEFF">新品上线</span></em>
                            </p>
                        </a>
                    </li>
                </th:block>
            </th:block>
        </ul>
    </div>

    <div id="recommend">
        <h2>为你推荐</h2>
        <!--<a href="##" class="more">查看更多>></a>-->
        <ul>
            <!-- 已配置推荐商品则显示配置内容 -->
            <th:block th:unless="${#lists.isEmpty(recommendGoodses)}">
                <th:block th:each="recommendGoods : ${recommendGoodses}">
                    <li>
                        <a th:href="@{'/goods/detail/'+${recommendGoods.goodsId}}" target="_blank">
                            <!--<div class="info discount" th:text="${recommendGoods.tag}">
                                新品
                            </div>-->
                            <img th:src="@{${recommendGoods.goodsCoverImg}}" th:alt="${recommendGoods.goodsName}">
                            <p class="name text-truncate" th:title="${recommendGoods.goodsName}" th:text="${recommendGoods.goodsName}">NewBeeMall</p>
                            <p class="item_price" th:title="${'¥ ' + recommendGoods.sellingPrice}" th:text="${'¥ ' + recommendGoods.sellingPrice}">NewBeeMall</p>
                            <p class="counter">猜你喜欢</p>
                            <div class="comment">
                                <p>新蜂精选</p>
                                <p>好物也可以不贵</p>
                            </div>
                        </a>
                    </li>
                </th:block>
            </th:block>
        </ul>
    </div>
</slot>
<div th:replace="~{mall/footer::footer-fragment}"></div>
<!-- jQuery -->
<script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>
<!-- jQuery UI 1.11.4 -->
<script th:src="@{/admin/plugins/jQueryUI/jquery-ui.min.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/admin/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/mall/js/swiper.min.js}" type="text/javascript"></script>
<script th:src="@{/admin/plugins/sweetalert/sweetalert.min.js}"></script>
<script th:src="@{/mall/js/index.js}" type="text/javascript"></script>
<script th:inline="javascript"> var _ctx = [[@{/}]]; </script>
<script th:src="@{/mall/js/search.js}" type="text/javascript"></script>
</body>
</html>
